<template>
	<view class="">
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true">
			<view class="row video-swiper" style="flex-wrap: wrap;">
				<view class="item-con" v-for="(item, index) in dataList" :key="index" @tap="userClickItem(item)">
					<view class="item-img">
						<u-image :src="item.pic" width="345" height="280"></u-image>
						<view class="itme-icon-play column center"><image src="/static/img/play.png" class="play-icon"></image></view>
					</view>
					<view class="item-info"><view class="clamp2 item-title">{{item.name}}</view></view>
				</view>
			</view>
		</s-pull-scroll>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: []
		};
	},
	onLoad() {
		this.refresh();
	},
	methods: {
		userClickItem(item){
			getApp().globalData.videoItem=item;
			this.navTo(`/pages/video/item`);
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				pageNo: pullScroll.page,
				pageSize: "10"
			};
			const res = await this.$request("content/video", data, {showLoading: true});
			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			if (res.result == 1 || res.data.list.length == 0) {
				pullScroll.empty();
				return;
			} else {
				this.dataList = this.dataList.concat(res.data.list);
				pullScroll.page >= Math.ceil(res.data.count / 10) ? pullScroll.finish() : pullScroll.success();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.itme-icon-play {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.play-icon{
	width: 64upx;
	height: 64upx;
}
.video-swiper {
	padding: 20upx 20upx 60upx 20upx;
}
.item-con {
	width: 345upx;
	position: relative;
	margin-bottom: 20upx;
	border-radius: 20upx;
	margin-right: 20upx;
	overflow: hidden;
	box-shadow: 0px 0px 60upx 0px rgba(168, 168, 168, 0.2);
}
.item-con:nth-child(2n) {
	margin-right: 0;
}
.item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 44upx;
}
.item-img {
	position: relative;
}
.item-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
